<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue2.js"></script>
</head>
<body>
<!--
    v-if :  false   隐藏    true  显示
          1. 实现元素的显示和隐藏
          2. 通过节点对象的添加和删除实现

    v-show :   false   隐藏    true  显示
           1.可以实现节点的显示和隐藏  添加style属性实现显示和隐藏  display: none
           2.v-show实现元素的显示和隐藏式通过添加css样式实现的

     注:  实现节点显示和隐藏 两种方式都可以  如果节点的操作比较频繁 则推荐使用  v-show

     v-if   v-else-if   v-else 要实现分支结构的效果  元素要相邻
-->

<div id="app">
  <p v-show="true">1:{{info}}</p>
  <p v-show="isShow">2:{{info}}</p>
<p>-----------------------------------------</p>
  <p v-if="false">info2:{{info2}}</p>
  <p v-else-if="false">v-else-if</p>
  <p v-else>info:{{info}}</p>
</div>

<script>

  const app = new Vue({
    el: '#app',
    data: {

      info2:'v-if',
      info:'v-show',
      isShow: false

    },
    methods: {}
  })

</script>
</body>
</html>